<template>
  <div>
    <div class="banner" style="text-align:center;" v-for="i in arr">
        <p class="title" style="padding-bottom:10px;color:#000000;display:inline-block;">
          {{i.title}}
        </p>
        <p style="color: rgb(0, 0, 0);line-height:26px; font-size: 14px; font-family: 微軟正黑體;max-width:520px;margin:0 auto;">
          {{i.para}}
        </p>

      </div>

  </div>
</template>
<script>
import l_shang from './l_shang'
export default {
  components:{
    l_shang
  },
props:['c_banner'],
data(){
  return{
     arr:this.c_banner,

    }
  }
}
</script>
<style>
 .tiao{
    text-align: center;

  }
  .tiao a{
    display: inline-block;
    margin: 20px;

    color:black;
    position: relative;
  }
  .tiao a::after{

    content:'';
    width:100%;
    height:1px;
    background:black;
    display: inline-block;
    position: absolute;
    bottom:2px;
    left:0;
  }
  .tiao:hover a::after{
      background:#f67599;
       transition:all .3s;
  }
  .tiao:hover a{
      color: #f67599;
       transition:all .3s;
  }

  .title{
    font-family: "oswald-ttf.sfd";
    font-size:75px;
		font-weight: bold;
  }
  .border1{
    border-top:1px solid rgba(224,224,224,1);
  }
  .border2{
    border-bottom:1px solid rgba(224,224,224,1);
  }
  .border3{
    border-left:1px solid rgba(224,224,224,1);
  }
  .border4{
    border-right:1px solid rgba(224,224,224,1);
  }


</style>
